{extend name="index/base" /}
{block name='title'}Order Detail{/block}

{block name='content'}
<div class="container clearfix my-5 pb-1">
	{include file="user/leftMenu" name="MY ORDER" route="user/order"/}

	<div class="userBox">
		<div class="userH_box pr pt-2">
			<table class="userTable orderDetail">
				<tbody>
					<tr>
						<th class="th_block" scope="row" width="150">Trade Links:</th>
						<td class="tc logsss_event_ps">
							<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center"
								class="userTable orderDetailPro mt10 mb10">
								<tbody>
									<tr>
										<th scope="col">Product Name</th>
										<th scope="col">SKU</th>
										<th scope="col">Goods Prices </th>
										<th scope="col">Subtotal</th>
										<th scope="col">Order Status</th>
										<th scope="col">Operation</th>
									</tr>
									<tr>
										<td colspan="6" class="line"></td>
									</tr>
									<tr>
										<td colspan="6">
                                           <span class="ml24">Order No.: {$orderModel['no']}</span>
                                        </td>
									</tr>
									{volist name="orderModel['linkGoods']" id="vo"}
									<tr>
										<td class="tl"> 
                                            <img class="ml5" src="{$vo['img']}" alt="{$vo['name']}" title="{$vo['name']}" width="70" height="94">
											<div class="ml10 order-detail-info">
                                                 <a href="javascript:;">
													{$vo['name']}                                                
                                                </a>
												<p>{$vo['sku_name']}</p>
												<p>Qty: {$vo['num']}</p>
											</div>
										</td>
										<td style="text-align:center;">
											<label>SKU:</label>
											<span>485053701</span>
										</td>
										<td style="text-align:center;"> 
											<label>Goods Prices:</label>
                                            <span>$</span>
                                            <span >{$vo['price']}</span>
                                        </td>
										{if($i==1)}
										<td rowspan="{:count($orderModel['linkGoods'])}" style="text-align:center;">
											<label>Subtotal:</label>
                                            <span>$</span>
                                            <span>{$orderModel['goods_money']}</span>
                                        </td>

										<td rowspan="{:count($orderModel['linkGoods'])}" style="text-align:center;">
											<label>Status:</label>
                                            <span>{$status_name}</span>
                                        </td>
										<td rowspan="{:count($orderModel['linkGoods'])}" style="text-align:left;padding-left:18px;padding-right:18px;">
											{if(in_array('pay',$handle_action))}
											<a href="/order/pay?order_id={$orderModel['id']}" class="cell_btn bg-blue">Pay</a>
											{/if}

											{if(in_array('cancel',$handle_action))}
											<a href="javascript:;" @click="handleOrderCond('{$orderModel['id']}','cancel')"
											   class="cell_btn bg-orange">Cancel</a>
											{/if}
											{if(in_array('del',$handle_action))}
											<a href="javascript:;" @click="handleOrderCond('{$orderModel['id']}','del')"
											   class="cell_btn bg-orange">Delete</a>
											{/if}
											{if(in_array('receive',$handle_action))}
											<a href="javascript:;" @click="handleOrderCond('{$orderModel['id']}','receive')"
											   class="cell_btn bg-orange">Receipt</a>
											{/if}
										</td>
										{/if}


									</tr>
									{/volist}									
								</tbody>
							</table>
							<h5 class="linear_gray violet " style="margin:10px 0px;">Total cost</h5>
							<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center"
								class="userTable orderDetailPro mt10 mb10">
								<tbody>
									<tr>
										<td class="tr"> Commodity price: <span>$</span>&nbsp;<span>{$orderModel['money']}</span></td>
									</tr>
									<tr>
										<td class="tr"> Discounts: -<span>$</span>&nbsp;<span>{$orderModel['dis_money']}</span></td>
									</tr>
									<tr></tr>
									<tr>
										<td class="tr">and the subtotal amount is: <span>$</span>&nbsp;<span class="fb" id="order_amount">{$orderModel['pay_money']}</span></td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr>
						<th scope="row" width="150">Consignee Name :</th>
						<td>{:empty($orderModel['linkAddr'])?'':($orderModel['linkAddr']['last_name'].' '.$orderModel['linkAddr']['first_name'])}</td>
					</tr>
					<tr>
						<th scope="row">Receipt Address :</th>
						<td>  {:empty($orderModel['linkAddr'])?'':($orderModel['linkAddr']['street'])} [ZIP Code: {:empty($orderModel['linkAddr'])?'':($orderModel['linkAddr']['postcode'])}] </td>
					</tr>
					<tr>
						<th scope="row">City / Town :</th>
						<td> {:empty($orderModel['linkAddr'])?'':($orderModel['linkAddr']['city'])}</td>
					</tr>
					<tr>
						<th scope="row">State / Province / Region :</th>
						<td> {:empty($orderModel['linkAddr'])?'':($orderModel['linkAddr']['state'].'/'.$orderModel['linkAddr']['suite'])}</td>
					</tr>
					<tr>
						<th scope="row">Destination Country / Region :</th>
						<td>{:empty($orderModel['linkAddr'])?'':($orderModel['linkAddr']['country'])}</td>
					</tr>
					<tr>
						<th scope="row">Zip :</th>
						<td>{:empty($orderModel['linkAddr'])?'':($orderModel['linkAddr']['postcode'])}</td>
					</tr>
					<tr>
						<th scope="row">Contact Telephone :</th>
						<td>{:empty($orderModel['linkAddr'])?'':($orderModel['linkAddr']['phone'])}</td>
					</tr>
					<tr>
						<th scope="row">E-mail :</th>
						<td>{:$orderModel['email']}</td>
					</tr>
					<tr>
						<th scope="row">Deliveries :</th>
						<td>{:$orderModel['freight_name']}</td>
					</tr>
					<tr>
						<th scope="row">Order Date :</th>
						<td>{$orderModel['create_time']}</td>
					</tr>
					{if(!empty($orderModel['linkLogistics']))}
						<tr>
							<th scope="row">Logistic No :</th>
							<td><a href="/track?num={$orderModel['linkLogistics']['no']}">{$orderModel['linkLogistics']['no']}</a></td>
						</tr>
						<tr>
							<th scope="row">Logistic TIME :</th>
							<td>{$orderModel['send_time']}</td>
						</tr>
					{/if}
				</tbody>

			</table>
		</div>

	</div>
</div>


{/block}
{block name='script'}
<!-- Vendor scrits: js libraries and plugins-->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/tiny-slider.js"></script>
<script src="/assets/js/smooth-scroll.polyfills.min.js"></script>



<script src="/assets/js/swiper.min.js"></script>

<script>
	var order_id = "input('order_id')";

	layui.extend({

	}).use([], function() {

		initVue({
			data: {
				listQuery: {
					activeState: 'all',
					id: order_id - 0 > 0 ? order_id : undefined,
					limit: 15,
					page: 1,
				},
				pay_way: 'paypal',
				order_id: "{:input('order_id')}",
				submitLoading: false,

			},
			components: {},
			computed: {

			},
			created: function() {

			},
			mounted: function() {


			},
			methods: {
				handleOrderCond: function(order_id, activeState) {
					var confirm_content = ""
					var url = ""
					var that = this;
					var fun = function(res) {
						that.$message.success(res.msg)
						location.reload()
					}
					if (activeState === 'del') {
						url = "order/del"
						confirm_content = "{:lang('tip_order_del')}"
						fun = function(res) {
							location.href = '/user/order'
						}
					} else if (activeState === 'cancel') {
						url = "order/cancel"
						confirm_content = "{:lang('tip_order_cancel')}"
					} else if (activeState === 'receive') {
						url = "order/receive"
						confirm_content = "{:lang('tip_order_receive')}"
					} else {
						that.$message.error("{:lang('err_data')}" + ":" + activeState)
						return
					}
					this.$confirm(confirm_content, '{:lang("tip")}', {
						confirmButtonText: "{:lang('sure')}",
						cancelButtonText: "{:lang('cancel')}",
						type: 'warning'
					}).then(function() {
						that.$network(url, {
							id: order_id
						}).then(function(res) {
							fun(res)

						})
					})
				},
			}
		})


	})
</script>


{/block}
